"use client"

import { Activity, TrendingUp } from "lucide-react"
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"

import {
   Card,
   CardContent,
   CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
} from "~/registry/default/ui/card"
import type { ChartConfig } from "~/registry/default/ui/chart"
import {
   ChartContainer,
   ChartTooltip,
   ChartTooltipContent,
} from "~/registry/default/ui/chart"

export const description = "A step area chart"

const chartData = [
   { month: "January", desktop: 186 },
   { month: "February", desktop: 305 },
   { month: "March", desktop: 237 },
   { month: "April", desktop: 73 },
   { month: "May", desktop: 209 },
   { month: "June", desktop: 214 },
]

const chartConfig = {
   desktop: {
      label: "Desktop",
      color: "hsl(var(--chart-1))",
      icon: Activity,
   },
} satisfies ChartConfig

export default function Component() {
   return (
      <Card>
         <CardHeader>
            <CardTitle>Area Chart - Step</CardTitle>
            <CardDescription>
               Showing total visitors for the last 6 months
            </CardDescription>
         </CardHeader>
         <CardContent>
            <ChartContainer config={chartConfig}>
               <AreaChart
                  accessibilityLayer
                  data={chartData}
                  margin={{
                     left: 12,
                     right: 12,
                  }}
               >
                  <CartesianGrid vertical={false} />
                  <XAxis
                     dataKey="month"
                     tickLine={false}
                     axisLine={false}
                     tickMargin={8}
                     tickFormatter={(value) => value.slice(0, 3)}
                  />
                  <ChartTooltip
                     cursor={false}
                     content={<ChartTooltipContent hideLabel />}
                  />
                  <Area
                     dataKey="desktop"
                     type="step"
                     fill="var(--color-desktop)"
                     fillOpacity={0.4}
                     stroke="var(--color-desktop)"
                  />
               </AreaChart>
            </ChartContainer>
         </CardContent>
         <CardFooter>
            <div className="flex w-full items-start gap-2 text-sm">
               <div className="grid gap-2">
                  <div className="flex items-center gap-2 font-medium leading-none">
                     Trending up by 5.2% this month{" "}
                     <TrendingUp className="size-4" />
                  </div>
                  <div className="text-muted-foreground flex items-center gap-2 leading-none">
                     January - June 2024
                  </div>
               </div>
            </div>
         </CardFooter>
      </Card>
   )
}
